<template>
  <div>
    <el-select
      v-if="onlyFactory"
      v-model="selected"
      :placeholder="newPlaceholder"
      :clearable="clearable"
      @change="handleSelectChange"
      size="small"
    >
      <el-option
        v-for="item in treeList"
        :key="item.code"
        :label="item.label"
        :value="item.code"
      >
      </el-option>
    </el-select>
    <el-cascader
      v-else
      ref="cascader"
      v-model="selected"
      :options="treeList"
      :props="{ ...defaultProps, multiple }"
      :clearable="clearable"
      :size="size"
      :show-all-levels="false"
      filterable
      :placeholder="newPlaceholder"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
import { treeselect } from "@/api/system/dept";
import { filterTreeData, foreachTreeData, filterTreeNode } from "@/utils/tree";
export default {
  props: {
    value: {
      type: [Number, String, null],
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    onlyFactory: {
      type: Boolean,
      default: false,
    },
    // 过滤 回调
    showCallBack: {
      type: Function,
    },
    // 置灰 回调
    disabledCallBack: {
      type: Function,
    },
    placeholder: {
      type: [Number, String, null, undefined],
      default: undefined,
    },
    size: {
      type: String,
      default: "small",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      treeList: [],
      defaultProps: {
        value: "code",
        label: "label",
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  computed: {
    selected: {
      set(val) {
        this.$emit("input", val);
      },
      get() {
        return this.value;
      },
    },
    newPlaceholder() {
      return this.onlyFactory && !this.placeholder
        ? "请选择工厂"
        : this.placeholder;
    },
  },
  created() {
    this.getTreeData();
  },
  methods: {
    getTreeData() {
      treeselect().then((res) => {
        let data = res.data || [];
        // 过滤节点
        if (
          this.showCallBack &&
          Object.prototype.toString.call(this.showCallBack) ==
            "[object Function]"
        ) {
          this.treeList = filterTreeData(data, this.showCallBack);
        } else if (this.onlyFactory == true) {
          this.treeList = filterTreeNode(data, (node) => {
            return ["1519694432903303169"].includes(node.orgType);
          });
        } else {
          this.treeList = data;
        }
        // 置灰节点
        if (
          this.disabledCallBack &&
          Object.prototype.toString.call(this.disabledCallBack) ==
            "[object Function]"
        ) {
          foreachTreeData(this.treeList, this.disabledCallBack);
        }
      });
    },
    handleSelectChange(value) {
      const selectItem = this.treeList.find((ele) => ele.code === value);
      this.$emit("change", selectItem);
    },
    handleChange() {
      this.$nextTick(() => {
        let selected = this.getSelectedItem();
        selected = selected.filter((ele) => !!ele);
        if (this.multiple) {
          this.$emit(
            "change",
            selected.map((ele) => ele.data)
          );
        } else {
          this.$emit("change", selected[0] ? selected[0].data : null);
        }
      });
    },
    getSelectedItem() {
      return this.$refs.cascader.getCheckedNodes();
    },
  },
};
</script>
<style lang="scss" scoped>
.org-select {
  width: 200px;
}
</style>
